 

      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container{
        width: 500px;
        height: 330px;
        margin: 10px auto;
        overflow: hidden;
        position: relative;
      }
      .carousel{
        width: 100%;
        height: 100%;
        display: flex;
        transition: 0.5s;
      }
      .container .carousel img{
        width: 500px;
        height: 300px;

      }
      .indicator{
        position: absolute;
        bottom: 10px;
        display: flex;
        outline:1px solid #fff;
        left: 50%;
        transform: translateX(-50%);
      }
      .indicator span{
        width: 20px;
        height: 20px;
        border: 2px solid #ccc;
        border-radius: 50%;
        margin: 0;
      }
      .indicator span.active{
        background: #fff;
        border-color: #fff;
      }
      .element .style{
        transform: translateX();
      }
